import React, { useRef } from 'react';
import ProForm, { ModalForm, ProFormDatePicker, ProFormTextArea } from '@ant-design/pro-form';
import { ProFormText } from '@ant-design/pro-form';
import REAccount from '@/utils/regexp/REAccount';
import CustomUpload from '@/components/Uploads';
import { Radio } from 'antd';

const dataForm: React.FC = (props) => {
  const formRef = useRef();
  const formLayout = {
    layout: 'horizontal',
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
    title: props.values.id ? '编辑' : '新建',
    width: 500,
    autoFocusFirstInput: true,
    submitter: {
      // 配置按钮文本
      searchConfig: {
        cancelText: '取消',
        submitText: '提交',
      },
      // 配置按钮的属性
      resetButtonProps: {},
      submitButtonProps: {},
    },
  };
  return (
    <ModalForm
      {...formLayout}
      visible={props.formVisible}
      modalProps={{
        mask: true,
        maskClosable: false,
        destroyOnClose: true,
        onCancel: () => {
          props.onCancel();
        },
      }}
      onFinish={async (values) => {
        await props.onSubmit(values);
      }}
      initialValues={props.values}
    >
      <ProFormText name="id" hidden label="id" />
      <ProFormText
        label="用户名"
        name="username"
        initialValue=""
        tooltip={REAccount.username(5, 20).msg}
        placeholder="请输入用户名"
        rules={[
          {
            type: 'string',
            required: true,
            pattern: REAccount.username(5, 20).reg,
            message: REAccount.username(5, 20).msg,
          },
        ]}
      />
      <ProFormText
        label="真实姓名"
        name="realname"
        initialValue=""
        placeholder="请输入真实姓名"
        rules={[
          {
            type: 'string',
            required: true,
            pattern: REAccount.realname(2, 20).reg,
            message: REAccount.realname(2, 20).msg,
          },
        ]}
      />
      <ProFormText
        label="昵称"
        name="nickname"
        initialValue=""
        rules={[
          {
            type: 'string',
            required: true,
            pattern: REAccount.nickname(2, 20).reg,
            message: REAccount.nickname(2, 20).msg,
          },
        ]}
      />
      <ProFormText.Password
        label="密码"
        name="password"
        initialValue=""
        rules={[
          {
            type: 'string',
            pattern: REAccount.password(5, 20, 3).reg,
            message: REAccount.password(5, 20, 3).msg,
          },
        ]}
      />
      <ProForm.Item label="头像" name="avatar" initialValue="">
        <CustomUpload accept=".jpg,.png" maxCount={1} />
      </ProForm.Item>
      <ProFormText name="email" label="邮箱" initialValue="" />
      <ProFormText name="mobile" label="手机号" initialValue="" />
      <ProFormDatePicker name="birthday" label="生日" />
      <ProForm.Item label="性别" name="gender" rules={[{ type: 'enum', enum: [0, 1, 2] }]}>
        <Radio.Group>
          <Radio value={1}>男</Radio>
          <Radio value={2}>女</Radio>
        </Radio.Group>
      </ProForm.Item>
      <ProForm.Item label="状态" name="status" rules={[{ type: 'enum', enum: [0, 1, 2, 3] }]}>
        <Radio.Group>
          <Radio value={1}>未激活</Radio>
          <Radio value={2}>正常</Radio>
          <Radio value={3}>冻结</Radio>
        </Radio.Group>
      </ProForm.Item>
      <ProFormTextArea name="remark" label="备注" initialValue="" />
    </ModalForm>
  );
};

export default dataForm;
